<template>
  <!-- 横向列表 -->
  <div class="List">
    <div class="card" v-for="(item, index) in list" :key="index" @click="itemClick(item.id || item.userId)">
      <img v-if="item.picUrl" v-lazy="item.picUrl + '?param=60y60'" alt="" />
      <img v-else-if="item.coverImgUrl" v-lazy="item.coverImgUrl + '?param=60y60'" alt="" />
      <img v-else-if="item.backgroundUrl" v-lazy="item.backgroundUrl + '?param=60y60'" alt="" />
      <img v-else v-lazy="item.album.picUrl + '?param=60y60'" alt="" />
      <span class="name">{{ item.name || item.nickname }}</span>
      <span class="count" v-if="item.trackCount">{{ item.trackCount }}首</span>
      <span class="creator" v-if="item.creator">by {{ item.creator.nickname }}</span>
      <span class="artist" v-if="item.artist">{{ item.artist.name }}</span>
      <span class="artist" v-if="item.album">{{ item.artists[0].name }}</span>
      <span class="playCount" v-if="item.playCount">{{ item.playCount | countFormat }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ['list'],
  data() {
    return {};
  },
  computed: {},
  created() {},
  components: {},
  methods: {
    itemClick(id) {
      this.$emit('itemClick', id);
    },
  },
};
</script>

<style scoped lang='scss'>
.List {
  > div:nth-child(odd) {
    background-color: #f9f9f9;
  }
  .card {
    font-size: 12px;
    cursor: pointer;
    &:hover {
      background-color: $gray;
    }
    img {
      @include image(60px, 5px);
      margin: 10px 10px 10px 0;
      vertical-align: middle;
    }
    .name {
      display: inline-block;
      width: 40%;
      font-size: 14px;
    }
    .artist {
      color: $userBlue;
    }
    .count {
      display: inline-block;
      width: 10%;
      color: #919191;
    }
    .creator {
      display: inline-block;
      width: 30%;
      color: #606266;
    }
    .playCount {
      color: #909399;
    }
  }
}
</style>